<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      shape="round"
      placeholder="大家都在搜~~~"
      show-action
      @click="goSearch"
    >
      <template #left>
        <div class="img" @click="show = true">
          <img src="../assets/home/my.svg" alt="" />
        </div>
      </template>

      <template #action>
        <div class="img">
          <img src="../assets/home/listening.svg" alt="" />
        </div>
      </template>
    </van-search>

    <!-- 我的信息 -->
    <van-popup v-model="show" position="left" :style="{ height: '100%' }">
      <Myslef></Myslef>
    </van-popup>

    <div class="main">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in bannersData" :key="index">
          <img v-lazy="item.imageUrl" />
          <!-- 类型 -->
          <div class="type" :style="{ backgroundColor: item.titleColor }">
            {{ item.typeTitle }}
          </div>
        </van-swipe-item>
      </van-swipe>

      <!-- 发现列表 -->
      <div class="find">
        <div
          class="findbox"
          v-for="(item, index) in findData"
          :key="index"
          @click="tolist(item.id)"
        >
          <!-- 图标 -->
          <div class="icon">
            <img :src="item.iconUrl" alt="" />
          </div>

          <!-- 标题 -->
          <div class="title">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <div class="mainbox">
      <!-- 推荐歌单 -->
      <div class="titbox">
        <div class="tit">推荐歌单</div>
        <div class="btn" @click="goSongsheetlist">
          更多
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 歌单列表 -->
      <div class="songsheet">
        <!-- 歌单图片轮播 -->
        <div class="sheetbox">
          <van-swipe vertical :autoplay="3000">
            <van-swipe-item
              v-for="item in songsheetData"
              :key="item.id"
              @click="viewSongsheet(item.id)"
            >
              <img :src="item.picUrl" alt="" />
              <!-- 标题 -->
              <div class="txt">{{ item.name }}</div>
            </van-swipe-item>
          </van-swipe>
        </div>

        <div
          class="sheetbox"
          v-for="(item, index) in songsheetData"
          :key="index"
          @click="viewSongsheet(item.id)"
        >
          <!-- 封图 -->
          <div class="songphoto">
            <van-image :src="item.picUrl" lazy-load>
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>

          <!-- 标题 -->
          <div class="txt">{{ item.name }}</div>
        </div>
      </div>

      <!-- 新歌速递 -->
      <div class="titbox">
        <div class="tit">新歌速递</div>
        <div class="btn" @click="goNewsong">
          更多
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 新歌列表 -->
      <div class="newsong">
        <div class="newlist">
          <div
            class="newlistbox"
            v-for="(item, index) in newsDataone"
            :key="index"
            @click="
              playAudio(
                item.id,
                item.album.picUrl,
                item.album.name,
                item.album.artists[0].name,
                item.album.artists[0].id
              )
            "
          >
            <!-- 封图 -->
            <div class="newphoto">
              <van-image :src="item.album.blurPicUrl" lazy-load>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>

            <div class="smallbox">
              <!-- 名字 -->
              <div class="newname">
                <div class="newsongname">{{ item.album.name }}</div>
                <div class="newsonger">{{ item.album.artists[0].name }}</div>
              </div>

              <!-- 简介 -->
              <div class="newtext">
                <div class="textbox">SQ</div>
                {{ item.album.company }}
              </div>
            </div>
          </div>
        </div>

        <div class="newlist">
          <div
            class="newlistbox"
            v-for="(item, index) in newsDatatwo"
            :key="index"
            @click="
              playAudio(
                item.id,
                item.album.picUrl,
                item.album.name,
                item.album.artists[0].name,
                item.album.artists[0].id
              )
            "
          >
            <!-- 封图 -->
            <div class="newphoto">
              <van-image :src="item.album.blurPicUrl" lazy-load>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>

            <div class="smallbox">
              <!-- 名字 -->
              <div class="newname">
                <div class="newsongname">{{ item.album.name }}</div>
                <div class="newsonger">{{ item.album.artists[0].name }}</div>
              </div>

              <!-- 简介 -->
              <div class="newtext">
                <div class="textbox">SQ</div>
                {{ item.album.company }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 排行榜 -->
      <div class="titbox">
        <div class="tit">排行榜</div>
        <div class="btn" @click="goRankinglist">
          更多
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 排行榜前三 -->
      <div class="ranking">
        <!-- 热歌榜 -->
        <div class="rankinglist">
          <!-- 标题 -->
          <div class="rankingtitle" @click="viewRanking(rankingData[3].id)">
            热歌榜
            <van-icon name="arrow" />
          </div>

          <!-- 排名 -->
          <div
            class="rankingsong"
            v-for="(item, index) in hotsongData"
            :key="index"
            @click="
              playAudio(
                item.id,
                item.al.picUrl,
                item.al.name,
                item.ar[0].name,
                item.ar[0].id
              )
            "
          >
            <!-- 歌曲封面 -->
            <div class="rankingimg">
              <van-image :src="item.al.picUrl" lazy-load>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>

            <!-- 歌名 -->
            <div class="songname">
              {{ item.al.name }}
            </div>

            <!-- 歌手名 -->
            <div class="songer" v-for="(a, index) in item.ar" :key="index">
              {{ a.name }}
            </div>

            <div class="rankingicon">
              <van-icon name="ellipsis" />
            </div>
          </div>
        </div>

        <!-- 飙升榜 -->
        <div class="rankinglist">
          <!-- 标题 -->
          <div class="rankingtitle" @click="viewRanking(rankingData[0].id)">
            飙升榜
            <van-icon name="arrow" />
          </div>

          <!-- 排名 -->
          <div
            class="rankingsong"
            v-for="(item, index) in soarData"
            :key="index"
            @click="
              playAudio(
                item.id,
                item.al.picUrl,
                item.al.name,
                item.ar[0].name,
                item.ar[0].id
              )
            "
          >
            <!-- 歌曲封面 -->
            <div class="rankingimg">
              <van-image :src="item.al.picUrl" lazy-load>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>

            <!-- 歌名 -->
            <div class="songname">
              {{ item.al.name }}
            </div>

            <!-- 歌手名 -->
            <div class="songer" v-for="(a, index) in item.ar" :key="index">
              {{ a.name }}
            </div>

            <div class="rankingicon">
              <van-icon name="ellipsis" />
            </div>
          </div>
        </div>

        <!-- 新歌榜 -->
        <div class="rankinglist">
          <!-- 标题 -->
          <div class="rankingtitle" @click="viewRanking(rankingData[1].id)">
            新歌榜
            <van-icon name="arrow" />
          </div>

          <!-- 排名 -->
          <div
            class="rankingsong"
            v-for="(item, index) in newsongData"
            :key="index"
            @click="
              playAudio(
                item.id,
                item.al.picUrl,
                item.al.name,
                item.ar[0].name,
                item.ar[0].id
              )
            "
          >
            <!-- 歌曲封面 -->
            <div class="rankingimg">
              <van-image :src="item.al.picUrl" lazy-load>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>

            <!-- 歌名 -->
            <div class="songname">
              {{ item.al.name }}
            </div>

            <!-- 歌手名 -->
            <div class="songer" v-for="(a, index) in item.ar" :key="index">
              {{ a.name }}
            </div>

            <div class="rankingicon">
              <van-icon name="ellipsis" />
            </div>
          </div>
        </div>
      </div>

      <!-- 排行榜列表 -->
      <div class="ranking">
        <div
          class="rankingbox"
          v-for="(item, index) in rankingData"
          :key="index"
        >
          <div class="rankingphoto" @click="viewRanking(item.id)">
            <van-image :src="item.coverImgUrl" lazy-load>
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
          <div class="txt">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <!-- 播放器 -->
    <Playbox></Playbox>
  </div>
</template>

<script>
import Myslef from "../components/Myself.vue";
import Playbox from "../components/Playbox.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "Home",

  components: {
    Myslef,
    Playbox,
  },

  data() {
    return {
      value: "",

      show: false,

      //轮播图数据
      bannersData: [],

      //发现列表数据
      findData: [],

      // 推荐歌单数据
      songsheetData: [],

      //排行榜数据
      rankingData: [],

      //热歌榜数据
      hotsongData: [],

      //飙升榜数据
      soarData: [],

      //新歌榜数据
      newsongData: [],

      //新歌速递数据
      newsDataone: [],
      newsDatatwo: [],
    };
  },

  created() {
    //获取轮播图数据
    this.getBanner();

    //获取发现列表数据
    this.getFindList();

    //获取推荐歌单数据
    this.getSongSheet();

    //获取排行榜数据
    this.getRanking();

    //获取新歌速递数据
    this.getNewsong();
  },

  computed: {
    ...mapState([
      "audioId",
      "audioEle",
      "isPaused",
      "songName",
      "songerName",
      "singerId",
      "audioComment",
    ]),
  },

  methods: {
    //跳转到搜索页面
    goSearch() {
      this.$router.push({ name: "Search" });
    },

    //跳转到排行榜页面
    goRankinglist() {
      this.$router.push({ name: "Rankinglist" });
    },

    //跳转到歌单广场页面
    goSongsheetlist() {
      this.$router.push({ name: "Songsheetlist" });
    },

    //跳转到新歌速递页面
    goNewsong() {
      this.$router.push({ name: "Newsong" });
    },

    // 列表点击跳转
    tolist(id) {
      if (id === -2) {
        return this.$router.push({ name: "Songsheetlist" });
      } else if (id === -3) {
        return this.$router.push({ name: "Rankinglist" });
      } else if (id === -1) {
        return this.$router.push({ name: "Everyday" });
      }
    },

    //获取轮播图数据
    getBanner() {
      this.axios({
        method: "get",
        url: "/banner",
      })
        .then((res) => {
          this.bannersData = res.data.banners.splice(0, 7);
        })
        .catch((err) => {
          
        });
    },

    //获取发现列表数据
    getFindList() {
      this.axios({
        method: "get",
        url: "/homepage/dragon/ball",
      })
        .then((res) => {
          this.findData = res.data.data.splice(0, 6);
        })
        .catch((err) => {
          
        });
    },

    //获取推荐歌单数据
    getSongSheet() {
      this.axios({
        method: "get",
        url: "/personalized",
      })
        .then((res) => {
          this.songsheetData = res.data.result.splice(0, 6);
        })
        .catch((err) => {
          
        });
    },

    //获取排行榜数据
    getRanking() {
      this.axios({
        method: "get",
        url: "/toplist/detail",
      })
        .then((res) => {
          this.rankingData = res.data.list.splice(0, 7);

          //获取热歌榜数据
          this.axios({
            method: "get",
            url: "/playlist/detail",
            params: {
              id: this.rankingData[3].id,
            },
          })
            .then((res) => {
              this.hotsongData = res.data.playlist.tracks.splice(0, 3);
            })
            .catch((err) => {
              
            });

          //获取飙升榜数据
          this.axios({
            method: "get",
            url: "/playlist/detail",
            params: {
              id: this.rankingData[0].id,
            },
          })
            .then((res) => {
              this.soarData = res.data.playlist.tracks.splice(0, 3);
            })
            .catch((err) => {
              
            });

          //获取新歌榜数据
          this.axios({
            method: "get",
            url: "/playlist/detail",
            params: {
              id: this.rankingData[1].id,
            },
          })
            .then((res) => {
              this.newsongData = res.data.playlist.tracks.splice(0, 3);
            })
            .catch((err) => {
              
            });
        })
        .catch((err) => {
          
        });
    },

    //获取新歌速递数据
    getNewsong() {
      this.axios({
        method: "get",
        url: "/top/song",
        params: {
          type: 0,
        },
      })
        .then((res) => {
          res.data.data.splice(0, 4).forEach((v) => {
            this.newsDataone.push(v);
          });

          res.data.data.splice(7, 4).forEach((v) => {
            this.newsDatatwo.push(v);
          });
        })
        .catch((err) => {
          
        });
    },

    //查看排行榜页面
    viewRanking(id) {
      this.$router.push({ name: "Ranking", params: { id } });
    },

    //查看排行榜页面
    viewSongsheet(id) {
      this.$router.push({ name: "Songsheet", params: { id } });
    },

    ...mapMutations(["changeStateProperty"]),

    // 点击播放音频
    playAudio(id, picUrl, songName, songerName, singerId) {
      if (id === this.audioId) {
        if (!this.audioEle.paused) {
          //暂停歌曲
          this.audioEle.pause();
          this.changeStateProperty({ key: "isPaused", value: true });
        } else {
          //播放歌曲
          this.audioEle.play();
          this.changeStateProperty({ key: "isPaused", value: false });
        }
        return;
      }

      //获取音频url
      this.axios({
        method: "get",
        url: "/song/url",
        params: {
          id,
        },
      })
        .then((res) => {
          let audioUrl = res.data.data[0].url;
          this.changeStateProperty({ key: "audioUrl", value: audioUrl });
          this.changeStateProperty({ key: "audioId", value: id });
          //获取暂停状态
          this.changeStateProperty({ key: "isPaused", value: false });
        })
        .catch((err) => {
          
        });

      //获取播放图片
      this.changeStateProperty({ key: "picUrl", value: picUrl });

      this.changeStateProperty({ key: "songName", value: songName });
      this.changeStateProperty({ key: "songerName", value: songerName });
      this.changeStateProperty({ key: "singerId", value: singerId });

      //获取专辑评论数据
      this.axios({
        method: "get",
        url: "/comment/music",
        params: {
          id,
        },
      })
        .then((res) => {
          this.changeStateProperty({
            key: "audioComment",
            value: res.data.hotComments,
          });
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  margin-bottom: 92px;
}

//搜索框
.img {
  position: relative;
  right: 4px;
}

.img img {
  width: 20px;
  height: 20px;
}

/deep/.van-search {
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 99;
}

/deep/.van-search__action {
  position: relative;
  top: 4px;
}

/deep/.van-search__content {
  padding-left: 26px;
}

// 轮播图
.main {
  background-color: #fff;
  top: 54px;
  position: relative;
}

/deep/.van-swipe {
  width: 352px;
  height: 172px;
  margin: auto;
  border-radius: 10px;
  & img {
    width: 352px;
    height: 172px;
  }
}

/deep/.van-swipe__indicator--active {
  background-color: #ec4141;
  opacity: 1;
}

.type {
  width: 50px;
  height: 20px;
  padding: 4px 10px;
  color: #fff;
  text-align: center;
  transform: scale(0.8);
  position: relative;
  bottom: 25px;
  left: 7px;
  margin-left: auto;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

// 发现列表
.find {
  width: 100%;
  display: flex;
  margin: auto;
  margin-top: 16px;
  overflow-x: auto;
  white-space: nowrap;
  background-color: #fff;
  padding-bottom: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
.find::-webkit-scrollbar {
  display: none;
}

.findbox {
  // width: 50px;
  display: flex;
  flex-wrap: wrap;
  &:nth-child(2n) {
    margin-left: 36px;
  }
  &:nth-child(2n + 1) {
    margin-left: 36px;
  }
}

.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: auto;
  background-color: #fe3c30;
}

.icon img {
  width: 36px;
  height: 36px;
  position: relative;
  top: 7px;
  left: 7px;
}

.title {
  width: 100%;
  height: 20px;
  text-align: center;
  padding: 6px 0 0 0;
}

// 推荐标题
.mainbox {
  margin-top: 64px;
}

.titbox {
  display: flex;
  margin-top: 10px;
  align-items: center;
  background-color: #fff;
  padding-top: 6px;
}

.tit {
  width: 80px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin-left: 14px;
}

.btn {
  width: 40px;
  height: 20px;
  padding: 2px 2px 0 6px;
  margin-left: auto;
  margin-right: 10px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #999;
  transform: scale(0.9);
}

//推荐歌单
.songsheet {
  display: flex;
  overflow-x: auto;
  background-color: #fff;
  padding: 6px 0;
  &/deep/.van-swipe {
    width: 120px;
    height: 156px;
    position: relative;
    bottom: 4px;
    & img {
      width: 120px;
      height: 120px;
      border-radius: 10px;
      padding-bottom: 4px;
    }
  }
  &/deep/.van-swipe__indicator {
    display: none;
  }
}

.songsheet::-webkit-scrollbar {
  display: none;
}

.sheetbox,
.rankingbox {
  width: 120px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 16px;
}

.songphoto,
.rankingphoto {
  width: 120px;
  height: 120px;
  border-radius: 10px;
}

.songphoto {
  &/deep/ .van-image__img {
    width: 120px;
    height: 120px;
    border-radius: 10px;
  }
}

.rankingphoto {
  &/deep/ .van-image__img {
    width: 120px;
    height: 120px;
    border-radius: 10px;
  }
}

.txt {
  transform: scale(0.9);
}

//新歌速递
.newsong {
  display: flex;
  overflow-x: auto;
  background-color: #fff;
  padding: 10px 0px;
  padding-right: 20px;
  box-sizing: border-box;
}

.newsong::-webkit-scrollbar {
  display: none;
}

.newlist {
  display: flex;
  flex-wrap: wrap;
}

.newlistbox {
  display: flex;
  padding: 4px 10px;
  align-items: center;
}

.newphoto {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  margin-left: 10px;
}

.newphoto {
  &/deep/ .van-image__img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
  }
}

.smallbox {
  width: 290px;
  display: flex;
  flex-wrap: wrap;
}

.newname {
  width: 100%;
  display: flex;
  padding-left: 12px;
}

.newsongname {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.newsonger {
  font-size: 12px;
  color: #999;
  transform: scale(0.8);
}

.newtext {
  color: #999;
  display: flex;
  align-items: center;
  margin-right: 10px;
  transform: scale(0.9);
}

.textbox {
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid red;
  color: red;
  transform: scale(0.5);
}

//排行榜
.ranking {
  display: flex;
  overflow-x: auto;
  background-color: #fff;
  padding: 10px 0px;
  padding-right: 14px;
  box-sizing: border-box;
}

.ranking::-webkit-scrollbar {
  display: none;
}

.rankinglist {
  width: 330px;
  padding: 0 10px;
  box-shadow: 0 0 0 2px rgba(231, 231, 231, 0.6);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 16px;
}

.rankingtitle {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  padding: 4px 6px;
}

.rankingsong {
  width: 100%;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

.rankingimg {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}

.rankingimg {
  &/deep/ .van-image__img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
  }
}

.songname {
  width: 80px;
  padding: 0 10px 0 16px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.songer {
  width: 80px;
  font-size: 12px;
  color: #999;
  transform: scale(0.8);
}

.rankingicon {
  margin-left: auto;
  font-size: 16px;
}

//播放器
/deep/.play {
  bottom: 50px;
}
</style>